<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" xmlns:th="http://www.thymeleaf.org">
    <title>重置密码</title>
    <link th:href="@{/css/style.css}" href="../static/css/style.css" rel="stylesheet">
    <link th:href="@{/css/style-responsive.css}" href="../static/css/style-responsive.css" rel="stylesheet">
    <link th:src="@{/css/bootstrap.min.css}" href="../static/css/bootstrap.min.css">
    <style>
        label.error {color: red}
    </style>
</head>

<body class="login-body">
<div class="container">
    <form class="form-signin" action="login.html" method="post" id="resetForm">
        <div class="form-signin-heading text-center">
            <h1 class="sign-title">重置密码</h1>
            <img th:src="@{/images/login-logo.png}" src="../static/images/login-logo.png" alt=""/>
        </div>
        <div class="login-wrap">
            <input type="text" readonly="readonly" class="form-control" value="15937465@163.com">
            <input type="password" id="psw" name="password" class="form-control" placeholder="新密码">
            <input type="password" id="npsw" name="resetPassword" class="form-control" placeholder="再次输入新密码">
            <p id="error" style="color: red"></p>
            <input type="submit" class="btn btn-primary btn-lg btn-block" value="重置密码">
        </div>
    </form>

</div>

</body>
<script th:src="@{/js/bootstrap.min.js}" src="../static/js/bootstrap.min.js"></script>
<script th:src="@{/js/modernizr.min.js}" src="../static/js/modernizr.min.js"></script>
<script th:src="@{/webjars/jquery/3.6.0/jquery.min.js}" src="../static/js/jquery.min.js" ></script>
<script src="../static/js/jquery.validate.min.js" th:src="@{/js/jquery.validate.min.js}"></script>



<script>
    $("#resetForm").validate({
        rules: {
            password: {
                required: true,
                minlength: 6,
                maxlength: 10,
            },
            resetPassword: {
                required: true,
                equalTo: "#psw"
            }
        },
        messages: {
            password: {
                required: "请输入密码",
                minlength: "最少6个字符",
                maxlength: "最多10个字符",
                color: "red"
            },
            resetPassword: {
                required: "密码不能为空",
                equalTo: "输入不一致",
                color: "red"
            }
        }
    })
    /*$(function (){
        $("#psw").blur(function (){
            let psw = $("#psw").val().trim();
            if (psw.length == 0)
                $("#error").text("密码不能为空")
            else {
                validatePsw();
            }
        })
    })
    function validatePsw(){
        let psw = $("#psw").val().trim();
        let npsw = $("#npsw").val().trim();

        if (psw == npsw)
            $("#resetForm").submit();
        else
            $("#error").text("输入不一致")
    }*/
</script>
</html>
